<template>
   <div class="capability-card" >
        <div class="capaitem" @mousemove="changeColor" @mouseleave="recoveColor">
            <div class="header" :style="{ backgroundColor: color }">
                <span :style="{ color: tcolor }">能力分类{{ card.category }}</span>
                <div class="title" :style="{ color: ncolor }">{{ card.servername }}</div>
                <div class="header-img" :style="{ backgroundColor: bcolor, color: color }"><svg-icon :icon-class="card.icon"
                        class-name="svgsize" :style="{ color: color }"></svg-icon></div>
            </div>
            <div class="main">
                <div class="main-title">能力开放平台</div>
                <p class="main-small">{{ card.introduce }}</p>
            </div>
            <div class="footer">
                <span><i class="el-icon-set-up"></i>已调用{{ card.useNumber }}次</span>
                <span class="right"><i class="el-icon-view"></i>{{ card.viewNumber }}</span>
            </div>
            
        </div>
        <div  v-show="showCard" class="main-card" :style="{ backgroundColor: color }">
            <div v-for="i in 7" class="title-card"></div>
        </div>
   </div>
</template>
<script>
import { color } from 'echarts';

export default {
    name: "CapabilityCard",
    props: ['card'],
    data() {
        return {
            tcolor: " rgb(182, 182, 182)",
            ncolor: "black",
            color: "white",
            bcolor: this.card.bcolor,
            showCard:false,
            // position: "position"
           

        }

    },

    methods: {
        changeColor() {
            this.bcolor = "white",
                this.color = this.card.bcolor,
                this.ncolor = "white",
                this.tcolor = "white",
                this.showCard = true
            // this.position = "positionChange"


        },
        recoveColor() {
            this.bcolor = this.card.bcolor,
                this.color = "white",
                this.ncolor = "black",
                this.tcolor = "rgb(182, 182, 182)",
                this.showCard = false
            // this.position = "position"
        }
    }
}
</script>

<style scoped lang="scss">

.capability-card{
    position: relative;
  
}

.main-card{
        width: 300px;
        height: 400px;
        position: absolute;
        top: 0;
        left: 0;
        transform: rotate(20deg) scale(1.1) translate(60px,20px);
        transition: transform 0.3s;
        z-index: 40;
         opacity: 0.8;
         .title-card{
            border-bottom: 2px solid rgb(255, 255, 255);
            height: 30px;
            width: 90%;

         }

    }
.capaitem {
    background-color: white;
    width: 350px;
    height: 470px;
    border: 1px solid rgb(209, 208, 208);
    border-radius: 15px;
    box-sizing: border-box;
    transition: transform 0.3s;
    box-shadow: 0px 0px 0px gray;
    z-index: 1;
    overflow: hidden;
    position: relative;
   
   


    .header {
        padding-top: 10px;
        // position: relative;
        height: 150px;
        transition: 0.5s;

        span {
            margin-left: 20px;
            font-size: 15px;
            transition: 0.5s;
        }

        .title {
            margin-top: 30px;
            width: 100%;
            text-align: center;
            font-size: 24px;
            font-weight: 600;
            transition: 0.5s;

        }

        .header-img {
            margin-top: 20px;
            margin-left: 135px;
            z-index: 900;
            // position: absolute;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            text-align: center;
            border: 1px solid rgb(219, 219, 219);
        }

        .svgsize {
            text-align: center;
            height: 70px;
            line-height: 70px;
            font-size: 40px;

        }
    }

    .main {
        margin-top: 60px;
        width: 100%;
        background-color: white;

        .main-title {
            text-align: center;
        }

        .main-small {
            width: 100%;
            padding: 10px 40px 10px 40px;
            color: rgb(160, 160, 160);
            word-spacing: 10px;
            height: 30px;
            line-height: 30px;
            height: 130px;
        }
    }

    .footer {
        width: 100%;
        padding: 40px;

        span {
            color: rgb(160, 160, 160);
            font-size: 12px;
        }

        i {
            color: rgb(160, 160, 160);
            font-weight: 600;
        }

        .right {
            margin-left: 140px;
        }

    }

    &:hover {
        transform: scale(1.1);
        box-shadow: 0px 2px 5px gray;
        z-index: 50 !important;
        transform: rotate(-15deg) scale(1.1) translate(-60px,0px);
       
    }

}
</style>